<template>
    <div>
        <Card :bordered="false" :dis-hover="true">
            <template slot="title">
                <Input prefix="md-create" v-model="params.nickName" placeholder="按教师名称查询" :maxlength="5" show-word-limit style="width: 220px;margin-right: 10px" />
                <Select v-model="params.hasMember" prefix="ios-menu" placeholder="按是否转正查询" style="width: 220px;margin-right: 10px" clearable>
                    <Option value="1" label="已转正"></Option>
                    <Option value="2" label="未转正"></Option>
                </Select>
                <Select v-model="params.laborContract" prefix="ios-menu" placeholder="按是否签订劳动合同查询" style="width: 220px;margin-right: 10px" clearable>
                    <Option value="1" label="已签订"></Option>
                    <Option value="2" label="未签订"></Option>
                </Select>
                <Select v-model="params.hasSocialSecurity" prefix="ios-menu" placeholder="按是否缴纳社保查询" style="width: 220px;margin-right: 10px" clearable>
                    <Option value="1" label="已缴纳"></Option>
                    <Option value="2" label="未缴纳"></Option>
                </Select>
                <Select v-model="params.hasLevel" prefix="ios-menu" placeholder="按是否离职查询" style="width: 220px;margin-right: 10px" clearable>
                    <Option value="1" label="已缴纳"></Option>
                    <Option value="2" label="未缴纳"></Option>
                </Select>
            </template>
            <el-table :data="teacherList" size="mini" :height="600" v-loading="loading" element-loading-text="玩命加载中...请稍后...." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 1)" :header-cell-style="{fontSize:'12px'}">
                <el-table-column type="index" align="center" width="80px" label="序号"></el-table-column>
                <el-table-column label="操作" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-popover placement="right" width="600" trigger="click">
                            <Button type="success" ghost size="small" icon="ios-bookmark-outline" style="margin-right: 5px;margin-top: 5px">用户详情</Button>
                            <Button type="primary" ghost size="small" icon="ios-contact-outline" style="margin-right: 5px;margin-top: 5px" @click="openDepartmentWindow(scope.row)">绑定部门</Button>
                            <Button type="warning" ghost size="small" icon="ios-body" style="margin-right: 5px;margin-top: 5px" @click="openRoleWindow(scope.row)">绑定角色</Button>
                            <Button type="info" ghost size="small" icon="ios-cloud-upload-outline" style="margin-right: 5px;margin-top: 5px" @click="openImageWindow(scope.row)">上传资料</Button>
                            <Button type="error" ghost size="small" icon="ios-cloud-upload-outline" style="margin-right: 5px;margin-top: 5px">办理离职</Button>
                            <Button type="success" size="small" icon="ios-cloud-upload-outline" style="margin-right: 5px;margin-top: 5px" @click="openGeneralWindow(scope.row)">办理转正</Button>
                            <Button type="primary" size="small" icon="ios-cloud-upload-outline" style="margin-right: 5px;margin-top: 5px">续签合同</Button>
                            <el-button slot="reference" icon="el-icon-setting" plain type="info" size="mini">操作</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="url" label="职业装" align="center">
                    <template slot-scope="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.url" :preview-src-list="[scope.row.url]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickName" label="教师姓名" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="departmentNames" label="所在部门" align="center" show-overflow-tooltip sortable></el-table-column>
               <!-- <el-table-column prop="roleNames" label="拥有角色" align="center" show-overflow-tooltip></el-table-column>-->
                <el-table-column prop="identityName" label="职工身份" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="entryTime" label="入职时间" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{$YEAR_MONTH_DAY(scope.row.entryTime)}}
                    </template>
                </el-table-column>
                <el-table-column prop="generalStatus" label="是否转正" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.generalStatus == '1' ? '未申请' : ( scope.row.generalStatus == '2' ? '申请中' : ( scope.row.generalStatus == '3' ? '已通过' : '已驳回' ))}}
                    </template>
                </el-table-column>
                <el-table-column prop="resignationStatus" label="是否离职" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.resignationStatus == '1' ? '在职' : ( scope.row.resignationStatus == '2' ? '离职' : '复职' )}}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="是否禁用" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" v-loading.fullscreen.lock="fullscreenLoading" active-color="#13ce66" inactive-color="#ff4949" @change="val=>{switchChange(val,scope.row)}" active-value="1" inactive-value="2"></el-switch>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    layout="total,prev,pager,next"
                    :total="params.total"
                    :page-size="params.size"
                    :current-page="params.page"
                    :hide-on-single-page="false"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
            ></el-pagination>
        </Card>


        <school-teacher-department ref="schoolTeacherDepartment"></school-teacher-department>
        <school-teacher-role ref="schoolTeacherRole"></school-teacher-role>
        <school-teacher-material ref="schoolTeacherMaterial"></school-teacher-material>
        <school-teacher-general ref="schoolTeacherGeneral"></school-teacher-general>
    </div>
</template>

<script>

    import { searchTeacherList } from '@/api/principal/school-manager/teacher'
    import { updateStatusForUser } from '@/api/system/access/user'
    import { mapMutations } from 'vuex'

    export default {
        name: "school-teacher",
        components:{
            SchoolTeacherDepartment:()=>import("@/views/principal/school-manager/school-teacher-department.vue"),
            SchoolTeacherRole:()=>import("@/views/principal/school-manager/school-teacher-role.vue"),
            SchoolTeacherMaterial:()=>import("@/views/principal/school-manager/school-teacher-material.vue"),
            SchoolTeacherGeneral:()=>import("@/views/principal/school-manager/school-teacher-general.vue")
        },
        data(){
            return {
                loading:true,
                teacherList:[],
                params:{page:1,size:8,total:0},
                fullscreenLoading:false
            }
        },
        methods:{
            ...mapMutations([   //注意: 这个是在methods方法区中
                'SET_TOKEN',
                'SET_ACCESS'
            ]),
            handlePageChange(page){
                this.params.page = page;
                this.getTeacherList(this.params);
            },
            handleSizeChange(size){
                this.params.size = size;
                this.getTeacherList(this.params);
            },
            getTeacherList(data){
                searchTeacherList(data).then(res=>{
                    this.teacherList = res.data.data.rows;
                    this.params.total = res.data.data.total;
                    this.loading = false;
                })
            },
            openDepartmentWindow(row){
                if(row.resignationStatus === '2'){
                    this.$message.error({message:'离职人员无法操作',center:true});
                    return false;
                }
                if(row.status === '2'){
                    this.$message.error({message:'禁用的账号无法操作',center:true});
                    return false;
                }
                this.$refs['schoolTeacherDepartment'].parent = row;
                this.$refs['schoolTeacherDepartment'].value = true;
            },
            openRoleWindow(row){
                if(row.resignationStatus === '2'){
                    this.$message.error({message:'离职人员无法操作',center:true});
                    return false;
                }
                if(row.status === '2'){
                    this.$message.error({message:'禁用的账号无法操作',center:true});
                    return false;
                }
                this.$refs['schoolTeacherRole'].parent = row;
                this.$refs['schoolTeacherRole'].value = true;
            },
            openImageWindow(row){
                this.$refs['schoolTeacherMaterial'].user = row;
                this.$refs['schoolTeacherMaterial'].value = true;
            },
            openGeneralWindow(row){ //转正
                if(row.resignationStatus === '2'){
                    this.$message.error({message:'离职人员无法操作',center:true});
                    return false;
                }
                if(row.status === '2'){
                    this.$message.error({message:'禁用的账号无法操作',center:true});
                    return false;
                }
                if(row.generalStatus !== '2'){
                    this.$message.error({message:'非申请人员无法操作',center:true});
                    return false;
                }

                this.$refs['schoolTeacherGeneral'].teacher = row;
                this.$refs['schoolTeacherGeneral'].value = true;
            },
            switchChange(val,row){
                let teacher = { id:row.id,status:val};
                this.fullscreenLoading = true;
                updateStatusForUser(teacher).then(res=>{
                    this.fullscreenLoading = false;
                    this.getTeacherList(this.params);
                    //如果禁用的是当前账号，则强制退出
                    if(val === '2' &&  this.$store.state.user.access.id === row.id){
                        this.SET_TOKEN("");
                        this.SET_ACCESS("");
                        this.$router.push({name:'login'});
                        this.$Message.info("已被强制退出")
                    }
                });
            }
        },
        created(){
            this.getTeacherList(this.params);
        }
    }
</script>

<style scoped>

</style>